<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport">
    <title>商品详情</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/detail.css">
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="js/vue.js"></script>
    <script src="js/reset.js"></script>
</head>
<body>
    <div id="app">
        <!-- 返回箭头 -->
        <div class="cover bgc">
            <img :src="pictImg" alt="">
            <!-- 图片指示 -->
            <div class="point font-min">1</div>
            
            <div class="name ml mt mr">{{prodName}}</div>
            <p class="price fontc ml mt">￥<span style="font-size: 1rem;">{{cashMoney}}</span><span v-if="has_kd"> + {{kdNum}}快豆</span></p>
            <p class="on-price font-min fontc-gray ml">在售价：<del>￥{{originalPrice}}</del></p>
        </div>
        <div class="title">宝贝详情</div>
        <div class="show">
            <div v-for="img in detailImgs">
                <img :src="img" alt="">
            </div>
        </div>
        
        <!-- 底部快豆抵扣购买 -->
        <div class="buy center bgc">
            <div class="price ml fontc">￥<span style="font-size: 1rem;">{{cashMoney}}</span><span v-if="has_kd"> + {{kdNum}}快豆</span></div>
            <div class="btn btn-linner-bgc" v-if="can_buy_btn" @click="toBuy"><span v-if="kdNum>0">快豆抵扣购买</span><span v-else>立即购买</span></div>
            <div class="btn btn-linner-bgc" style="background-image: linear-gradient(to right, #9e9e9e, #9e9e9e );" v-else="can_buy_btn" ><span v-if="kdNum>0">快豆抵扣购买</span><span v-else>立即购买</span></div>
        </div>
        <!-- 点击快豆抵扣购买弹出提示 -->
        <div class="mask" v-show="buyDialog">
            <div class="exchange-toast bgc br">
                <div class="name">快豆兑换提示</div>
                <div class="wrap">
                    <div class="box center">
                        <div class="left">
                            <div class="cover">
                                <img src="./img/coin.png" alt="">
                            </div>
                            <p class="fontc font-min">{{kdNum}}快豆</p>
                        </div>
                        <div class="arrow"><img src="./img/go.png" alt=""></div>
                        <div class="right">
                            <div class="cover">
                                <img src="./img/red-bag.png" alt="">
                            </div>
                            <p class="fontc font-min">{{cashGiftMoney}}元购物金</p>
                        </div>
                    </div>
                    <div class="btn-wrap center">
                        <div class="btn btn-cancel" @click="closeBuy">取消</div>
                        <div class="btn btn-linner-bgc btn-sure" @click="doBuy">确认抵扣</div>
                    </div>
                </div>
                <p class="font-min fontc-gray">抵扣后请尽快使用，若商品抢完抵扣的快豆无法退还!</p>
            </div>
        </div>

        <!-- 回到首页 -->
        <a href="./index.html" class="home btn-linner-bgc"><img src="./img/home.png" alt=""><span>首页</span></a>

    </div>

  <script>
  	var vm = new Vue({
		el:'#app',
		data:{
			pictImg: '',
			prodName: '',
			cashMoney: '',
			kdNum: '',
			originalPrice: '',
			detailImgs:'',
			cashGiftMoney:'',
			clickUrl:'',
			has_kd:true,
			buyDialog:false,
			can_buy_btn:false
	    },
	    methods:{
	    	//去购买
	    	toBuy(){
	    		if(this.has_kd){
	    			this.buyDialog = true;
	    		}else{
	    			location.href = vm.clickUrl;
	    		}
	    	},
	    	//购买
	    	doBuy(){
	    		this.buyDialog = false;
	    		doChangeBuy();
	    	},
	    	//取消
	    	closeBuy(){
	    		this.buyDialog = false;
	    	}
	    }
	});
  
  	init();
  	function init(){
  		var url = '../api/prod/detail';
  		var prodId = getQueryVariable('prodid');
  		var params={'prodId':prodId,"token":localStorage.getItem("token")};
  		$.post(url, params, function(data){
			if(data.retCode){
				var json = data.result;
				vm.prodName=json.prodName;
				vm.pictImg=json.pictImg;
				vm.cashMoney=Number(json.cashMoney/100).toFixed(2);
				if(json.kdNum<=0){
					vm.has_kd = false;
				}else{
					vm.kdNum=Number(json.kdNum/100);
				}
				vm.originalPrice=Number(json.originalPrice).toFixed(2);
				vm.cashGiftMoney=Number(json.cashGiftMoney/100).toFixed(2);
				vm.detailImgs=json.detailImgs;
				vm.clickUrl=json.clickUrl;
				var acc = JSON.parse(sessionStorage.getItem("points.account"))
		  		if(acc.total>vm.kdNum){
		  			vm.can_buy_btn=true;
		  		}
			}
		});
  	}
  	
  	
  	function doChangeBuy(){
  		var url = '../api/prod/buy';
  		var prodId = getQueryVariable('prodid');
  		var params={'prodId':prodId,"token":localStorage.getItem("token")};
  		$.post(url, params, function(data){
			if(data.retCode){
				var account = JSON.parse(sessionStorage.getItem("points.account"));
			    account.total = account.total - vm.kdNum;
			    account.today = account.today - vm.kdNum;
			    sessionStorage.setItem("points.account", JSON.stringify(account));
				location.href = vm.clickUrl;
			}
		});
  	}
  	
  	
  	function getQueryVariable(variable) {
		var query = window.location.search.substring(1);
		var vars = query.split("&");
		for (var i = 0; i < vars.length; i++) {
			var pair = vars[i].split("=");
			if (pair[0] == variable) {
				return pair[1];
			}
		}
		return (false);
	}
	
  </script>
</body>
</html>